<template>
  <div>
    <h2>计算属性</h2>
    <div>{{ sum }}</div>
    <div>{{ sum }}</div>
    <div>{{ sum }}</div>
    <div>{{ sum }}</div>
    <h3>这是方法调用</h3>
    <div>{{ sumFn() }}</div>
    <div>{{ sumFn() }}</div>
    <div>{{ sumFn() }}</div>
    <div>{{ sumFn() }}</div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            num1 : 10,
            num2 : 12
        }
    },
    methods:{
        sumFn(){
            console.log('这是方法调用')
            return this.num1 + this.num2
        }
    },
    // computed这里是对象
    computed:{
        // sum是一个方法，但是当做属性来使用
        sum(){
            console.log('这是计算属性')
            // this指向的是vue的实例
            return this.num1 + this.num2

            // 1. 计算属性是一个函数，这个函数要写return！！
            // 2. 当依赖的数据（num1，num2）改变的时候，sum的值也一起发生改变
            // 3. this指向的是vue的实例
            // 4. 使用的时候，不加括号，当做属性使用（和data中定义的数据一样，当做变量使用)
        }
    }
}
</script>

<style>

</style>